<template>
	<div class="record">
		<van-nav-bar
		  fixed
		  border
		  title="缴费记录"
		  left-arrow
		  @click-left="goBack"
		/>
		<div class="tabs">
			<van-tabs v-model="active" type="card"  @change="tabChange" sticky swipeable>
			  <van-tab title="未支付" name="a">
					<record-item v-for="(item,index) in data.list" :item="item" :key="index"/>  
				  <div class="NotYet" v-if="data.list == '' || data.list==null">
				  	<div class="NotYet_img">
				  		<van-image
				  		  width="100"
				  		  height="100"
				  		  fit="contain"
				  		  :src="`${publicPath}img/8.png`"
				  		/> 
				  	</div>
				  	<h3>当前暂无未支付账单</h3>
					<p class="time">棒棒哒，请继续保持哦~</p>
				  </div>
			  </van-tab>
			  <van-tab title="已支付" name="b" >
				 <paid-item v-for="(item,index) in paid" :item="item" :key="index"/>  
				  <div class="NotYet"  v-if="paid == '' || paid == null">
				  	<div class="NotYet_img">
				  		<van-image
				  		  width="100"
				  		  height="100"
				  		  fit="contain"
				  		  :src="`${publicPath}img/8.png`"
				  		/> 
				  	</div>
				  	<h3>当前暂无已支付账单</h3>
				  </div>
			  </van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
import {NavBar,Tab,Tabs,Image} from "vant"
import recordItem from "@/components/record-item"
import paidItem from "@/components/paid-item"
import {home,wechatBills} from "@/api/index"
export default{
	components:{
		[NavBar.name]:NavBar,
		[Tab.name]:Tab,
		[Tabs.name]:Tabs,
		[Image.name]:Image,
		recordItem,
		paidItem
	},
	data(){
		return{
			active:"a",
			data:[],
			paid:[],
			publicPath: process.env.BASE_URL,
		}
	},
	async activated() {
		this.getData()
		this.PaidData()
	},
	methods:{
		goBack(){
			this.$router.back()
		},
		async getData(){
			this.data = await home();
		},
		async PaidData(){
			this.paid = await wechatBills();
		},
		tabChange(name){
			if(name == "b"){
				this.PaidData()
			}else{
				this.getData()
			}
		}
	}
}	
</script>

<style scoped lang="less">
.tabs{
	padding-top: 60px;
	
}	
.van-tabs__content{
	margin:0 16px;
}
.NotYet{
	width:90%;
	background:rgba(255,255,255,1);
	box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
	border-radius:10px;
	margin:20px auto;
	text-align: center;
	padding-bottom: 30px;
	padding-top:30px;
	.NotYet_img{
		// padding:20px 0;
	}
	h3{
		font-size:25px;
		font-weight:bold;
		color:rgba(31,39,46,1);
		margin:10px auto;
	}
}
@media (min-width:750px) {
	.tabs{
		padding-top: 60px;
		
	}	
	.van-tabs__content{
		margin:0 16px;
	}
	.NotYet{
		width:90%;
		background:rgba(255,255,255,1);
		box-shadow:0px 15px 33px 0px rgba(138,149,158,0.1);
		border-radius:10px;
		margin:20px auto;
		text-align: center;
		padding-bottom: 30px;
		padding-top:30px;
		.NotYet_img{
			// padding:20px 0;
		}
		h3{
			font-size:25px;
			font-weight:bold;
			color:rgba(31,39,46,1);
			margin:10px auto;
		}
	}
}

</style>
